import React, {Component} from 'react'
const defaultImg = require('../../utils/default.png')
import FadeInView from '../FadeInView'
import {
    Alert,
    View,
    Text,
    WebView,
    Image,
    SectionList,
    Dimensions,
    ScrollView,
    Modal,
    TouchableOpacity
} from 'react-native'
import {connect} from 'react-redux'
import {styles} from './styles'
import * as API from '../../utils/api'
import {IMAGE_RADIO} from '../../utils/configuration'
import SwiperImage from '../Carousel/SwiperImage'
import Categories from '../Categories'
import Announcement from '../Announcement'
import Store from '../../store'
import {
    loadLogo,
    loadLongRentList,
    loadShortRentList,
    loadMeetingRoomList,
    loadSiteList,
    loadAnnouncementList,
    loadModulesList
} from '../../actions'



class Stewart extends Component {
    static navigationOptions = ({navigation}) => {
        const {state} = navigation
        const {
            params = {}
        } = state
        const {
            headerTitle = '盒子管家'
        } = params
        return {headerTitle: headerTitle, tabBarLabel: '管家'}
    }
    componentDidMount() {
        // load shortrent list
        // this
        //     .props
        //     .dispatch(loadShortRentList({page: 1}))
        // // load longrentlist
        // this
        //     .props
        //     .dispatch(loadLongRentList({page: 1}))
        // // load meetingroom list
        // this
        //     .props
        //     .dispatch(loadMeetingRoomList({page: 1}))
        // // load site list
        // this
        //     .props
        //     .dispatch(loadSiteList({page: 1}))
        // load modules
         this
         .props
         .dispatch(loadModulesList())

        // load announcement list
        // this
        //     .props
        //     .dispatch(loadAnnouncementList())

        const {setParams} = this.props.navigation
        Store.subscribe(setTitle)
        function setTitle() {
            const {H5Logo} = Store
                .getState()
                .logo
                .data
            setParams({
                headerTitle: H5Logo === "" || H5Logo === null
                    ? "盒子管家"
                    : <Image
                            style={{
                            width: 110,
                            height: 35
                        }}
                            source={{
                            uri: H5Logo
                        }}/>
            })
        }
       // Store.dispatch(loadLogo())

    }
    render() {
        const {msg, code, data} = this.props.logo
        const H5Banner = data && data.H5Banner
            ? data
                .H5Banner
                .split(',')
            : null
        return (
            <ScrollView style={styles.container}>
                {(data && data.H5Banner
                    ? <SwiperImage data={H5Banner}/>
                    : <FadeInView><Image
                        style={{
                        width: Dimensions
                            .get('window')
                            .width,
                        height: Dimensions
                            .get('window')
                            .width * IMAGE_RADIO
                    }}
                        source={defaultImg}/></FadeInView>)}
                {/* categories */}
                <Categories/> 
                {/* 公告轮播 */}
                <Announcement/>
                {/* 专题模块 */}
            </ScrollView>
        )
    }
}
mapStateToProps = (state) => {
    const {logo} = state
    return {logo}
}

export default connect(mapStateToProps)(Stewart)
